<template>
  <div class="recruitment">
        <div class="cho">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="按区域筛选">
                    <el-select size="small"  @change="areaselected(formInline.area)" v-model="formInline.area" placeholder="按区域筛选">
                    <el-option 
                    v-for="(item,index) in areacho"
                    :key="item+index"
                    :value="item.area"
                    >{{item.area}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="按项目筛选">
                    <el-select size="small"  @change="departmentselected(formInline.project)" v-model="formInline.project" placeholder="按项目筛选">
                    <el-option 
                    v-for="(item,index) in selection"
                    :key="item+index"
                    :value="item"
                    >{{item}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="date">
                <el-date-picker
                    type="month"
                    value-format="yyyy-MM"
                    @change="getSTime"
                    placeholder="选择月份"
                    v-model="formInline.date"
                    style="width: 100%;"
                ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="choose">筛选</el-button>
                    <el-button type="primary" size="small" @click="chooseall">全部</el-button>
                    <el-button type="success" size="small" @click="handleadd">新增</el-button>
                    <el-button type="warning" size="small" @click="exportExcel">导出</el-button>
                </el-form-item>
                </el-form>
            </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column v-if="this.tableData.area!==''" prop="area" label="区域" header-align="center" align="center"></el-table-column>
            <el-table-column v-if="this.tableData.project!==''" prop="project" label="项目" header-align="center" align="center"></el-table-column>
            <el-table-column v-if="this.tableData.department!==''" prop="department" label="部门" header-align="center" align="center"></el-table-column>
            <el-table-column prop="vacant_job" label="空缺岗位总数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="this_month_recruit_count" label="本月目标岗数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="resume_count" label="简历投递总数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="resume_screen_count" label="简历筛选数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="resume_pass_rate" label="简历通过率" header-align="center" align="center"></el-table-column>
            <el-table-column prop="first_try_count" label="初试参加人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="first_try_pass_count" label="初试通过人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="first_try_pass_rate" label="初试合格率" header-align="center" align="center"></el-table-column>
            <el-table-column prop="reexamine_count" label="复试参加人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="reexamine_pass_count" label="复试通过人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="reexamine_pass_rate" label="复试通过率" header-align="center" align="center"></el-table-column>
            <el-table-column prop="final_count" label="到岗人数" header-align="center" align="center"></el-table-column>
            <el-table-column prop="resume_final_rate" label="招聘完成率" header-align="center" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100" header-align="center" align="center">
                <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="medium">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


        <div id="nejobchart" :style="{width: '300px', height: '300px'}"></div>

        <el-dialog title="招聘情况编辑" :visible.sync="dialogVisible">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="区域" prop="area">
                    <el-input v-model="ruleForm.area" disabled></el-input>
                </el-form-item>
                <el-form-item label="项目" prop="project">
                    <el-input v-model="ruleForm.project" disabled></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <el-input v-model="ruleForm.department" disabled></el-input>
                </el-form-item>
                <el-form-item label="空缺岗位总数" prop="vacant_job">
                    <el-input v-model="ruleForm.vacant_job"></el-input>
                </el-form-item>
                <el-form-item label="本月目标岗数" prop="this_month_recruit_count">
                    <el-input v-model="ruleForm.this_month_recruit_count"></el-input>
                </el-form-item>
                <el-form-item label="简历投递总数" prop="resume_count">
                    <el-input v-model="ruleForm.resume_count"></el-input>
                </el-form-item>
                <el-form-item label="简历筛选数" prop="resume_screen_count">
                    <el-input v-model="ruleForm.resume_screen_count"></el-input>
                </el-form-item>
                <el-form-item label="初试参加人数" prop="first_try_count">
                    <el-input v-model="ruleForm.first_try_count"></el-input>
                </el-form-item>
                <el-form-item label="初试通过人数" prop="first_try_pass_count">
                    <el-input v-model="ruleForm.first_try_pass_count"></el-input>
                </el-form-item>
                <el-form-item label="复试参加人数" prop="reexamine_count">
                    <el-input v-model="ruleForm.reexamine_count"></el-input>
                </el-form-item>
                <el-form-item label="复试通过人数" prop="reexamine_pass_count">
                    <el-input v-model="ruleForm.reexamine_pass_count"></el-input>
                </el-form-item>
                <el-form-item label="到岗人数" prop="final_count">
                    <el-input v-model="ruleForm.final_count"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeForm(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                <el-form-item label="区域" prop="area">
                    <el-select v-model="ruleForm1.area" placeholder="请选择活动区域">
                        <el-option v-for="(item,index) in areacho" :key="item+index" :label="item.area" :value="item.area"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目" prop="project">
                    <el-input v-model="ruleForm1.project"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <el-input v-model="ruleForm1.department"></el-input>
                </el-form-item>
                <el-form-item label="空缺人数" prop="vacant_job">
                    <el-input v-model="ruleForm1.vacant_job"></el-input>
                </el-form-item>
                <el-form-item label="本月目标岗位数" prop="this_month_recruit_count">
                    <el-input v-model="ruleForm1.this_month_recruit_count"></el-input>
                </el-form-item>
                <el-form-item label="投简历总数" prop="resume_count">
                    <el-input v-model="ruleForm1.resume_count"></el-input>
                </el-form-item>
                <el-form-item label="简历筛选数" prop="resume_screen_count">
                    <el-input v-model="ruleForm1.resume_screen_count"></el-input>
                </el-form-item>
                <el-form-item label="初试参加人数" prop="first_try_count">
                    <el-input v-model="ruleForm1.first_try_count"></el-input>
                </el-form-item>
                <el-form-item label="初试通过人数" prop="first_try_pass_count">
                    <el-input v-model="ruleForm1.first_try_pass_count"></el-input>
                </el-form-item>
                <el-form-item label="复试参加人数" prop="reexamine_count">
                    <el-input v-model="ruleForm1.reexamine_count"></el-input>
                </el-form-item>
                <el-form-item label="复试通过人数" prop="reexamine_pass_count">
                    <el-input v-model="ruleForm1.reexamine_pass_count"></el-input>
                </el-form-item>
                <el-form-item label="到岗人数" prop="final_count">
                    <el-input v-model="ruleForm1.final_count"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit(ruleForm1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {get ,post} from '../../../utils/axios.tool'
import Formsheet from '../../usermall/formsheet'
import Qs from 'qs'
import axios from 'axios'
export default {
    components:{
        Formsheet
    },
    data() {
        return {
            usersid:'',
            formInline: {
                area: '',
                project: '',
                date: "",
            },
            areacho:[],
            dialogVisible:false,
            dialogFormVisible:false,
            tableData: [
                {
                    area: "",
                    project:'',
                    department:'',
                    vacant_job: "1",
                    this_month_recruit_count: "1",
                    resume_count: "1",
                    resume_screen_count: "1",
                    resume_pass_rate: "1",
                    first_try_count: "1",
                    first_try_pass_count: "",
                    first_try_pass_rate: "",
                    reexamine_count: "",
                    reexamine_pass_count: "",
                    reexamine_pass_rate: "",
                    final_count: "",
                    resume_final_rate: "",
                }
            ],
            ruleForm:{
                area:'',
                porject:'',
                department:'',
                vacant_job: "",
                this_month_recruit_count: "",
                resume_count: "",
                resume_screen_count: "",
                first_try_count: "",
                first_try_pass_count: "",
                reexamine_count: "",
                reexamine_pass_count: "",
                final_count: "",
            },
            ruleForm1:{
                area:'',
                project:'',
                department:'',
                vacant_job:'',
                this_month_recruit_count:'',
                resume_count:'',
                resume_screen_count:'',
                first_try_count:'',
                first_try_pass_count:'',
                reexamine_count:'',
                reexamine_pass_count:'',
                final_count:'',
            },
            dd:[],
            totalData:[
                {
                    area:'合计',
                    project:'',
                    vacant_job:0,
                    this_month_recruit_count:0,
                    resume_count:0,
                    resume_screen_count:0,
                    first_try_count:0,
                    first_try_pass_count:0,
                    reexamine_count:0,
                    reexamine_pass_count:0,
                    final_count:0,
                    resume_final_rate:0,
                    reexamine_pass_rate:'',
                    first_try_pass_rate:'',
                    resume_pass_rate:'',
                }
            ]
        }
    },
    methods:{
        changeForm() {
            let id = this.usersid;
            let url = `/usermanage/recruits/${id}/`
            Qs.stringify(this.ruleForm)
            let sessionId = localStorage.getItem("sessionId");
            let Authorization =  `JWT ${sessionId}`;
            axios.put(url,Qs.parse(this.ruleForm),{headers:{
                'Authorization':Authorization
                }
            }).then(res=>{
                this.dialogVisible = false;
                this.$message("修改成功");
                this.getData()
            })     
        },
        exportExcel() {　//兼容ie10哦！
        　　require.ensure([], () => {　　　　　　　　
            const { export_json_to_excel } = require('../../../vendor/Export2Excel');　　//引入文件　　　　　　
            const tHeader = ['地区', '项目', '空缺岗位总数', '本月目标岗数', '简历投递总数', '简历筛选数', '简历通过率', '初试参加人数', '初试通过人数', '初试合格率', '复试参加人数', '复试通过人数', '复试通过率', '到岗人数', '招聘完成率']; //将对应的属性名转换成中文
            const filterVal = ['area', 'project', 'vacant_job', 'this_month_recruit_count', 'resume_count', 'resume_screen_count', 'resume_pass_rate', 'first_try_count', 'first_try_pass_count', 'first_try_pass_rate', 'reexamine_count', 'reexamine_pass_count', 'reexamine_pass_rate', 'final_count', 'resume_final_rate'];//table表格中对应的属性名　　　　　 　　　
            const list = this.tableData;　　//想要导出的数据　　　　　　
            const data = this.formatJson(filterVal, list);　　　　　　　　
            export_json_to_excel(tHeader, data, '招聘情况分析');
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
        },
         handleClick(row) {
             this.usersid = row.id
             this.ruleForm = row
            this.dialogVisible = true
        },
        handleadd(){
            this.dialogFormVisible = true
        },
        submit(forname){
            this.ruleForm1 = forname
            let url = "/usermanage/recruits/";
            this.$axios.post(url, this.ruleForm1).then(res => {
                this.dialogFormVisible = false;
                this.$message("添加成功");
                this.getData();
            });
        },
        getSTime(val){
            this.formInline.data = val
        },
        areaselected(val){
            this.formInline.area = val
            this.formInline.project = ''
        },
        departmentselected(val){
            this.formInline.project = val
        },
        choose(){
            this.dd = []
            this.totalData=[{ area:'合计',project:'',vacant_job:0,this_month_recruit_count:0,resume_count:0,resume_screen_count:0,first_try_count:0,first_try_pass_count:0,reexamine_count:0, reexamine_pass_count:0,final_count:0,resume_final_rate:'1',reexamine_pass_rate:'', first_try_pass_rate:'', resume_pass_rate:'',}]
            let url = '/usermanage/recruits/';
            this.$axios.get(url,this.formInline).then(res => {
                let that =this
                that.tableData = res
                res.map((item,index)=>{
                    that.totalData[0].vacant_job+=item.vacant_job
                    that.totalData[0].this_month_recruit_count+=item.this_month_recruit_count
                    that.totalData[0].resume_count+=item.resume_count
                    that.totalData[0].resume_screen_count+=item.resume_screen_count
                    that.totalData[0].first_try_count+=item.first_try_count
                    that.totalData[0].first_try_pass_count+=item.first_try_pass_count
                    that.totalData[0].reexamine_count+=item.reexamine_count
                    that.totalData[0].reexamine_pass_count+=item.reexamine_pass_count
                    that.totalData[0].final_count+=item.final_count
                })
                that.totalData[0].resume_final_rate = `${(that.totalData[0].final_count/that.totalData[0].this_month_recruit_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].final_count/that.totalData[0].this_month_recruit_count*100).toFixed(2)}%`
                that.totalData[0].resume_pass_rate = `${(that.totalData[0].resume_screen_count/that.totalData[0].resume_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].resume_screen_count/that.totalData[0].resume_count*100).toFixed(2)}%`
                that.totalData[0].first_try_pass_rate = `${(that.totalData[0].first_try_pass_count/that.totalData[0].first_try_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].first_try_pass_count/that.totalData[0].first_try_count*100).toFixed(2)}%`
                that.totalData[0].reexamine_pass_rate = `${(that.totalData[0].reexamine_pass_count/that.totalData[0].reexamine_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].reexamine_pass_count/that.totalData[0].reexamine_count*100).toFixed(2)}%`
                that.tableData.push(this.totalData[0])
                that.qqqqap()
                that.drawLine()
            });
        },
        areachoose(){
            let url='/usermanage/area/'
            this.$axios.get(url).then(res=>{
                this.areacho = res.data
            })
        },
        chooseall(){
            this.formInline.area = ''
            this.formInline.project = ''
            this.formInline.date = ''
            this.getData()
        },
        getData(){
            this.dd = []
            this.totalData=[{ area:'合计',project:'',vacant_job:0,this_month_recruit_count:0,resume_count:0,resume_screen_count:0,first_try_count:0,first_try_pass_count:0,reexamine_count:0, reexamine_pass_count:0,final_count:0,resume_final_rate:'1',reexamine_pass_rate:'', first_try_pass_rate:'', resume_pass_rate:'',}]
            let url = '/usermanage/recruits/'
            this.$axios.get(url).then(res=>{
                let that =this
                that.tableData = res
                res.map((item,index)=>{
                    that.totalData[0].vacant_job+=item.vacant_job
                    that.totalData[0].this_month_recruit_count+=item.this_month_recruit_count
                    that.totalData[0].resume_count+=item.resume_count
                    that.totalData[0].resume_screen_count+=item.resume_screen_count
                    that.totalData[0].first_try_count+=item.first_try_count
                    that.totalData[0].first_try_pass_count+=item.first_try_pass_count
                    that.totalData[0].reexamine_count+=item.reexamine_count
                    that.totalData[0].reexamine_pass_count+=item.reexamine_pass_count
                    that.totalData[0].final_count+=item.final_count
                })
                that.totalData[0].resume_final_rate = `${(that.totalData[0].final_count/that.totalData[0].this_month_recruit_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].final_count/that.totalData[0].this_month_recruit_count*100).toFixed(2)}%`
                that.totalData[0].resume_pass_rate = `${(that.totalData[0].resume_screen_count/that.totalData[0].resume_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].resume_screen_count/that.totalData[0].resume_count*100).toFixed(2)}%`
                that.totalData[0].first_try_pass_rate = `${(that.totalData[0].first_try_pass_count/that.totalData[0].first_try_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].first_try_pass_count/that.totalData[0].first_try_count*100).toFixed(2)}%`
                that.totalData[0].reexamine_pass_rate = `${(that.totalData[0].reexamine_pass_count/that.totalData[0].reexamine_count*100).toFixed(2)}%`=='NaN%'?0:`${(that.totalData[0].reexamine_pass_count/that.totalData[0].reexamine_count*100).toFixed(2)}%`
                that.tableData.push(that.totalData[0])
                that.qqqqap()
                that.drawLine()
            })
        },
        qqqqap(){
            let dd = this.dd
                dd.push(this.totalData[0].this_month_recruit_count)
                dd.push(this.totalData[0].final_count)
                let allrate = this.totalData[0].resume_final_rate
                allrate = allrate.substring(0, allrate.length - 1)/100;
                dd.push(allrate)    
        },
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let nejobchart = this.$echarts.init(document.getElementById('nejobchart'))
            // 绘制图表
            nejobchart.setOption({
                tooltip : {
                        trigger: 'axis'
                    },
                    // legend: {
                        
                    // },
                    // color:'',
                    xAxis : [
                        {   
                            triggerEvent: true,
                            type : 'category',
                            data : ['目标岗位数','到岗人数','招聘完成率']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'人数',
                            type:'bar',
                            data:this.dd,
                        },
                    ]
            });
        }
    },
    mounted(){
        this.areachoose()
        
        this.getData()
    },
    computed : {
        selection :function(){
            for(var i = 0; i < this.areacho.length; i++){
                if(this.areacho[i].area == this.formInline.area){
                    return this.areacho[i].project;
                }
            }
        },
   }
}
</script>

<style lang="less">
.recruitment{
    .el-table th.gutter{
    display: table-cell!important;
    }
    .el-button--mini, .el-button--small{
        margin-right: 40px;
    }
    table{
        tr:last-of-type{
            td:last-of-type{
                button{
                    display: none;
                }
            }
        }
    }
}
</style>